<template :style="dataTable">
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.name" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUsers">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">用户添加</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :height=heightData  :data="dataList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<!--<el-table-column type="selection" width="55">-->
			<!--</el-table-column>-->
			<el-table-column type="index" align="center" width="50">
			</el-table-column>
			<el-table-column prop="usrname" label="用户账户" align="center">
			</el-table-column>
			<el-table-column prop="name" label="名称" align="center">
			</el-table-column>
			<el-table-column prop="name" label="所属城市" align="center">
			</el-table-column>
			<el-table-column prop="mail" label="邮箱" align="center">
			</el-table-column>
			<el-table-column prop="phone" label="手机号" align="center">
			</el-table-column>
			<el-table-column prop="phone" label="用户角色" align="center">
			</el-table-column>
			<el-table-column label="操作"  min-width="220" width="100" align="center">
				<template scope="scope">
					<el-button size="small" @click="handleEdit2(scope.$index, scope.row)">所做项目</el-button>
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" style="margin: 10px 0px">
			<!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
			<el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="params.page"   :page-sizes="[5,10, 20, 30, 40,50,200]"
							:page-size="params.pageSize"  layout="total, sizes, prev, pager, next, jumper" :total="totalRecord" style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog title="用户编辑" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="用户账户" prop="usrname">
					<el-input  :disabled="true" v-model="editForm.usrname"></el-input>
				</el-form-item>
				<el-form-item label="用户密码" prop="pwd">
					<el-input v-model="editForm.pwd"></el-input>
				</el-form-item>
				<el-form-item label="用户名称" prop="name">
					<el-input  v-model="editForm.name"></el-input>
				</el-form-item>
				<el-form-item label="用户邮箱" prop="mail">
					<el-input  v-model="editForm.mail"></el-input>
				</el-form-item>
				<el-form-item label="联系方式" prop="phone">
					<el-input v-model="editForm.phone" ></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editLoading = false,editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="用户新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="用户账户" prop="usrname">
					<el-input  v-model="addForm.FLD_USERNAME"></el-input>
				</el-form-item>
				<el-form-item label="用户密码" prop="pwd">
					<el-input v-model="addForm.FLD_USERPASS"></el-input>
				</el-form-item>
				<el-form-item label="用户名称" prop="name">
					<el-input  v-model="addForm.FLD_FACT_NAME"></el-input>
				</el-form-item>
				<el-form-item label="所属城市" prop="name">
					<el-input  v-model="addForm.FLD_CITY_CODE"></el-input>
				</el-form-item>
				<el-form-item label="所属公司" prop="name">
					<el-input  v-model="addForm.FLD_COMPANY_ID"></el-input>
				</el-form-item>
				<el-form-item label="用户邮箱" prop="mail">
					<el-input  v-model="addForm.FLD_EMAIL"></el-input>
				</el-form-item>
				<el-form-item label="联系方式" prop="phone">
					<el-input v-model="addForm.FLD_PHONE" ></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="phone">
					<el-input v-model="addForm.FLD_MEMO" ></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false,addLoading = false">取消</el-button>
				<el-button type="primary" @click="resetForm()" :loading="addLoading">重置</el-button>
				<el-button type="primary" @click.native="addSubmit()" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
    const insurance = require( '../../../api/insurance');        //   接口js引用
    export default {
        data() {
            return {
                filters: {
                    name: ''
                },
                totalRecord:0,  //  总记录数
                params: {
                    page: 1,     //  当前页
                    pageSize: 10,    //  每页行数
                },
                dataList:[],
                total: 0,
                page: 1,
                listLoading: false,
                sels: [],//列表选中列
                editFormVisible: false,//编辑界面是否显示
                editLoading: false,
                editFormRules: {
                },
                //编辑界面数据
                editForm: {
                    id:'',
                    usrname:'',    // 用户名称
                    pwd: '',    // 用户密码
                    name:'',
                    mail:'',
                    phone:'',   // 用户手机号
                    mode:'2',
                },

                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                },
                //新增界面数据
                addForm: {
                    FLD_ROLE_ID:"1",
                    FLD_USERNAME:'zhangsan',    // 用户名称
                    FLD_USERPASS: '123456',    // 用户密码
                    FLD_FACT_NAME:'张三',
                    FLD_EMAIL:'@hzgolong.com',		// 邮箱
                    FLD_PHONE:'15578897856',   	// 用户手机号
                    FLD_CITY_CODE:'002',
                    FLD_COMPANY_ID:'001',
                    FLD_MEMO:'蒋慧敏测试添加',
                },
                heightData: document.body.clientHeight-200,
                dataTable:document.body.clientHeight-200,
            }
        },
        methods: {
            //  每页行数 选择事件
            handleSizeChange(val) {
                this.params.pageSize = val;        // 分页参数 每页行数 （赋值全局变量）
                this.getUsers();  // 调用公共列表方法
            },

            // 当前页数 点击事件
            handleCurrentChange(val) {
                this.params.page  = val;    // 分页参数 当前页数 （赋值全局变量）
                this.getUsers();     // 调用公共列表方法
            },
            //获取用户列表
            getUsers() {
                this.listLoading = true;
                var that = this;
                $.ajax(insurance.posturl+"user/AllUsers?page="+(that.params.page-1)+"&pageSize="+this.params.pageSize,{
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    'type': 'GET',
                    success:function (res) {
                        res = JSON.parse(res);
                        if(res.isSuccess){
                            that.totalRecord = JSON.parse(res.Content).count;
                            that.dataList = JSON.parse(res.Content).list;
                        }
                        that.listLoading = false;
                    }
                });
            },
            //删除
            handleDel: function (index, row) {
                var that = this;
                that.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    that.listLoading = true;
                    var data = JSON.stringify({"id":row.id+''}); // "mode":'1'
                    $.ajax(insurance.posturl+"user/DeleteUser",{
                        'data': data,
                        headers: {'Content-Type': 'application/json;charset=UTF-8'},
                        'type': 'POST',
                        success:function (res) {
                            if(res === 'FAIL'){
                                that.$message({ message: '删除失败',type: 'success'});
                            }else{
                                that.$message({ message: '删除成功',type: 'success'});
                                that.getUsers();
                            }
                            that.editLoading = false;
                        }
                    });

                }).catch(() => {

                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                var that = this;
                that.editFormVisible = true;
                var data = JSON.stringify({'id':row.id});
                $.ajax(insurance.posturl+"user/UserInfo",{
                    'data': data,
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    'type': 'POST',
                    success:function (res) {
                        that.editForm = JSON.parse(JSON.parse(res).Content);
                        that.editLoading = false;
                    }
                });
            },
            handleEdit2: function (index, row) {
                this.$router.push({path: '/projectCount', query: {ID:row.id}});
            },
            //显示新增界面
            handleAdd: function () {
                this.addFormVisible = true;
                // this.addForm = {
                //     usrname:'',    // 用户名称
                //     pwd: '123456',    // 用户密码
                //     name:'',
                //     mail:'@hzgolong.com',		// 邮箱
                //     phone:'',   	// 用户手机号
                //     mode:'0',
                // };
            },
            //编辑
            editSubmit: function () {
                var that = this;
                that.$refs.editForm.validate((valid) => {
                    if (valid) {
                        that.editLoading = true;
                        let para = Object.assign({}, that.editForm);
                        var data =JSON.stringify({'depeartment':1,"id":para.id, "usrname":para.usrname, "pwd":para.pwd,"name":para.name,"mail":para.mail,"phone":para.phone}); //"mode":'2'
                        $.ajax(insurance.posturl+"user/StorageUsers",{
                            'data': data,
                            headers: {'Content-Type': 'application/json;charset=UTF-8'},
                            'type': 'POST',
                            success:function (res) {
                                if(res === 'FAIL'){
                                    that.$message({ message: '编辑失败',type: 'success'});
                                }else{
                                    that.$message({ message: '编辑成功',type: 'success'});
                                    that.editFormVisible = false;
                                    that.getUsers();
                                }
                                that.editLoading = false;
                            }
                        });
                    }
                });
            },
            // 新增重置
            resetForm() {
                // this.addForm = {
                //     username:'',    // 用户名称
                //     pwd: '',    // 用户密码
                //     name:'',
                //     mail:'',		// 邮箱
                //     phone:'',   	// 用户手机号
                //     mode:'0',
                // };
            },
            //新增
            addSubmit: function () {
                var that = this;
                that.$refs.addForm.validate((valid) => {
                    if (valid) {
                        that.addLoading = true;
                        let para = Object.assign({}, that.addForm);
                        var data =JSON.stringify({
							'FLD_ROLE_ID':that.addForm.FLD_ROLE_ID,
							'FLD_USERNAME':that.addForm.FLD_USERNAME,
                            'FLD_USERPASS':that.addForm.FLD_USERPASS,
                            'FLD_FACT_NAME':that.addForm.FLD_FACT_NAME,
                            'FLD_PHONE':that.addForm.FLD_PHONE,
                            'FLD_EMAIL':that.addForm.FLD_EMAIL,
                            'FLD_CITY_CODE':that.addForm.FLD_CITY_CODE,
                            'FLD_COMPANY_ID':that.addForm.FLD_COMPANY_ID,
                            'FLD_MEMO':that.addForm.FLD_MEMO,
						});
                        // http://192.168.19.145:8877/SysAPI/UserAddJson
                        // http://47.96.67.141:8888/api/SysAPI/UserAddJson
                        $.ajax('http://192.168.19.145:8877/SysAPI/UserAddJson',{
                            'data': data,
                            headers: {'Content-Type': 'application/json;charset=UTF-8'},
                            'type': 'POST',
                            success:function (res) {
                                res = JSON.parse(res);
                                console.log(res);
                                // if(!res.isSuccess){
                                //     that.$message({ message: '添加'+res.msg,type: 'success'});
                                // }else{
                                //     that.$message({ message: '添加成功',type: 'success'});
                                //     that.addFormVisible = false;
                                //     that.getUsers();
                                // }
                                that.addLoading = false;
                            }
                        });
                    }
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {
                var ids = this.sels.map(item => item.id).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = { ids: ids };
                    batchRemoveUser(para).then((res) => {
                        this.listLoading = false;
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getUsers();
                    });
                }).catch(() => {

                });
            }
        },
        mounted() {
            var that = this;
            that.getUsers();
        }
    }

</script>

<style scoped>
	.el-dialog--small.el-dialog{width: 50%;max-width: 500px;left: 700px;}
</style>